const path = require('path')
const { srcPath, distPath } = require('./path')
const { merge } = require('webpack-merge')
const webPackCommonConf = require('./webpack.common')
const webpack = require('webpack')

module.exports = merge(webPackCommonConf, {
  mode: 'development',
  output: {
    path: distPath,
    // contenthash 常用于cdn缓存。我理解的是文件不变的情况下，最后打包出来的hash串也不会变。
    // 如果hash不变，浏览器直接会从缓存中获取资源，而不会重新请求，速度更快
    // 如果hash变了，浏览器会去重新请求资源
    // 打包代码的文件名, name为多入口时的entry的key
    filename: '[name].[contenthash:8].js',
  },
  module: {
    rules: [
      {
        test: /\.(jpg|jpeg|png|gif)$/i,
        loader: 'file-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.less$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
      },
    ],
  },
  plugins: [
    // DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用
    // 配置环境变量
    new webpack.DefinePlugin({
      ENV: JSON.stringify('development'),
    }),
  ],
  devServer: {
    port: 9000,
    client: {
      progress: true, // 在浏览器中以百分比显示编译进度。
    },
    static: {
      // 告诉服务器从哪里提供内容。只有在你希望提供静态文件时才需要这样做
      directory: path.resolve(__dirname, 'dist'),
    },
    open: true, // 自动打开浏览器
    compress: true, // 启动gzip压缩
    // 配置代理
    proxy: {
      // 将本地 /api/xx 代理到 localhost:3000/api/xx
      '/api': 'http://localhost: 3000',
      // 将本地 /api2/xx 代理到 localhost:3000/xx
      '/api2': {
        target: 'http://localhost:3000',
        pathRewrite: {
          '/api2': '',
        },
      },
    },
  },
})
